<template>
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left"  onclick="history.go(-1)"></i>
            <p>找回密码</p>
            <div></div>
        </header>
        <div class="top-ban"></div>
        <h1>找回密码</h1>
        <table>
            <tbody>
                <tr>
                    <td>手机号码</td>
                    <td><input type="text" placeholder="请输入手机号码" v-model="form.userid" /></td>
                </tr>
                <tr>
                    <td>真实姓名</td>
                    <td><input type="text" placeholder="真实姓名" v-model="form.realname" /></td>
                </tr>
                <tr>
                    <td>身份证号</td>
                    <td><input type="text" placeholder="请输入身份证号" v-model="form.identitycard" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" placeholder="请输入新密码" v-model="password" /></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" placeholder="请再次输入密码" v-model="confirmPassword" /></td>
                </tr>
            </tbody>
        </table>
        <button @click="edit" class="btn">完成</button>
        <text v-if="noshow">{{ text }}</text>
    </div>
</template>

<script setup>
import "@/style/css/register.css";
import {useRouter} from "vue-router";
import {reactive, ref, computed, onMounted} from "vue";
import axios from "axios";

const router = useRouter();
let form = reactive({
    userid: "",
    realname: "",
    identitycard: "",
    password: "",
});
var noshow = ref(false);
var password = ref("");
var confirmPassword = ref("");
var text = ref("");
var userList = ref([]);

// 正则验证
var phone_pattern = /0?(13|14|15|18|17)[0-9]{9}/;
var idcard_pattern = /\d{17}[\d|x]|\d{15}/;
// 函数
const show=()=> {
    noshow.value=true;
    setTimeout(() => {
        noshow.value=false;
    }, 2000);
}

onMounted(async () => {
    
    await axios.get("/api/user/getAll").then((res) => {
        userList.value = res.data.data;
        console.log(userList.value)
    });
});

async function editPassword(){
    await axios.put("/api/user/editPassword", form).then((res) => {
        if (res.data.status == 200) {
            router.push("/login");
        } else {
            text.value = res.data.msg;
            show();
        }
    }).catch((error) => {
        console.log(error);
    });
}
const isempty = computed(() => {
    return (
        !form.userid ||
        !form.realname ||
        !form.identitycard ||
        !password.value ||
        !confirmPassword.value
    );
});
const edit =  () => {
    if (isempty.value) {
        text.value = "请填写完整的信息";
        show();
    } else {
        // 正则验证手机号码
        if (!phone_pattern.test(form.userid)) {
            text.value = "请输入正确的手机号码";
            show();
        } else if (!idcard_pattern.test(form.identitycard)) {
            text.value = "请输入正确的身份证号";
            show();
        } else {
            if (!userList.value.some(user => user.userid === form.userid)) {
                text.value = "用户不存在";
                show();
            } else if (!userList.value.some(user => user.identitycard === form.identitycard)) {
                text.value = "身份证号不匹配";
                show();
            } else {
                // 两次密码输入是否一致
                if (password.value == confirmPassword.value) {
                    form.password = password.value;
                    // 发送修改密码的请求
                    editPassword()
                } else {
                    text.value = "两次密码输入不一致";
                    show()
                    password.value = "";
                    confirmPassword.value = "";
                }
            }
        }
    }
};


</script>
